<template>
 <div class="catetitle">
   <div class="title" v-for="(item,index) in title" @click="titleClick(index)">
     <span :class="{active:currentIndex == index}">{{item}}</span>
   </div>
 </div>
</template>

<script>
 export default {
   name: 'CateTitle',
   data () {
     return {
       title:['流行','新款','推荐'],
       currentIndex:0
     }
   },
   methods:{
     titleClick(index){
       this.currentIndex = index
       this.$emit("titleClick",index)
     }
   },
   components: {

   }
 }
</script>

<style  scoped>
.catetitle{
  display: flex;
  text-align: center;
  margin: 20px 0px;
  font-size: 14px;
}
.title{
  flex: 1;
}
.active {
   padding: 8px;
   border-bottom: 3px solid var(--color-tint);;
 } 
</style>
